<!DOCTYPE html>
<html>
<head>
    <title>Pilot Portal</title>
        <!-- theme -->
        <link rel="Stylesheet" type="text/css" href="css/ui.jqgrid.css" />
        <link rel="Stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.14.custom.css" />
        <link rel="Stylesheet" type="text/css" href="css/datePicker.css" />
        <link rel="Stylesheet" type="text/css" href="css/Site.css" />
        
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

        <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="js/date.js"></script>
        <script type="text/javascript" src="js/jquery.datePicker.js"></script>
        <script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
        
        <script type="text/javascript" src="js/jquery.layout.min-1.2.0.js"></script>
        <script type="text/javascript" src="js/prf.js"></script>

        <script id="tmplSelect" type="text/x-jquery-tmpl">
            <option value="${value}">${text}</option>
        </script>        
        
        <script type="text/javascript">
            // load document
            $(document).ready( function () {
                $('body').layout({ applyDefaultStyles: true });
                $('#accordion').accordion();
                initMenu();
                initLogbook();
                LoadPlanes();
                LoadAirports();
                initChangePlanes();
                initLogEntryDialog();
                initModelsEntryDialog();
                initNNumbersEntryDialog();
                initModels();
                initCategories();
                initNNumbers();
                initCategorySelect();
                // init btn handlers
                // add new record logbook
                $('#oDialog').button().click(function (){
                    ClearFields();
                    $('#dialog').dialog('open');
                });
                // add new record models
                $('#oMDialog').button().click(function (){
                    $('#Modelsdialog').dialog('open');
                });
                // add new record nnumbers
                $('#oNDialog').button().click(function (){
                    $('#NNumbersdialog').dialog('open');
                });
                // clear fields
                $('#btnClear').button().click( function () {
                    ClearFields();
                });
            });
        </script>
        <script type="text/javascript">
            function menuItemClick(grid){
                    $('.dGrid').hide();
                    $('#' + grid).show();
                }
        </script>
</head>
<body>
    <div class="ui-layout-center">
        <div id="dBook" class="dGrid" style="display: none;">
            <table>
            <tr><td><table id="Logbook"></table></td></tr>
            <tr><td><div id="pager"></div></td></tr>
            <tr><td style="text-align: right;"><button id="oDialog">Add</button></td></tr>
            </table>
        </div>
        <div id="dModels" class="dGrid" style="display: none;">
            <table>
                <tr><td><table id="Models"></table></td></tr>
                <tr><td><div id="Modelspager"></div></td></tr>
                <tr><td style="text-align: right;"><button id="oMDialog">Add</button></td></tr>
            </table>
        </div>
        <div id="dCategories" class="dGrid" style="display: none;">
            <table>
                <tr><td><table id="Categories"></table></td></tr>
            </table>
        </div>
        <div id="dNNumbers" class="dGrid" style="display: none;">
            <table>
                <tr><td><table id="NNumbers"></table></td></tr>
                <tr><td><div id="NNumberspager"></div></td></tr>
                <tr><td style="text-align: right;"><button id="oNDialog">Add</button></td></tr>
            </table>
        </div>
    </div>
    <div class="ui-layout-north" style="background-color: blue;">
        <label style="font-size: large;">Pilot Portal</label>
    </div>
    <div class="ui-layout-south">Copyright AT 2011</div>
    <div class="ui-layout-west">
        <div id="accordion">
            <h1><a href="#" onclick="menuItemClick('dBook')">Logbook</a></h1>
            <div>
            </div>
            <h1><a href="#">Tables</a></h1>
            <div>
                <a href="#" onclick="menuItemClick('dModels')">Models</a>
                <a href="#" onclick="menuItemClick('dCategories')">Categories</a>
                <a href="#" onclick="menuItemClick('dNNumbers')">N Numbers</a>
            </div>
            <h1><a href="#">Tools</a></h1>
            <div>
                <a href="#">Weight & balance</a>
            </div>
            <h1><a href="#">Reports</a></h1>
            <div>
            </div>
            <h1><a href="#">Links</a></h1>
            <div>
                <a href="http://www.aopa.org" target="_blank">AOPA</a>
                <a href="http://www.avemco.com" target="_blank">Avemco</a>
                <a href="http://http://www.aviationweather.gov" target="_blank">Weather</a>
                <a href="http://www.duat.com" target="_blank">DUAT</a>
                <a href="http://www.duats.com" target="_blank">DUATS</a>
            </div>
        </div>
    </div>
    <div id="dialog" title="Add flight">
        <table style="width: 100%; border: thin solid #000000; ">
            <tbody>
                <tr>
                    <td><label>Date</label>&nbsp;</td>
                    <td colspan="2"><label>Plane</label>&nbsp;</td>
                    <td colspan="2"><label>N-number</label>&nbsp;</td>
                    <td><label>From</label>&nbsp;</td>
                    <td><label>To</label>&nbsp;</td>
                    <td colspan="5"><label>Comments</label>&nbsp;</td>
                    <td><label># Instr</label>&nbsp;</td>
                    <td><label># Ldg</label>&nbsp;</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input id="datepicker" class="fValid" style="width: 80px;" type="text" /></td>
                    <td colspan="2" style="vertical-align: top;">
                        <select id="Plane" style="width: 100px;"> 
                            <option></option> 
                        </select></td>
                    <td colspan="2" style="vertical-align: top;">
                        <select id="NNumber" style="width: 100px;"> 
                            <option></option> </select></td>
                    <td style="vertical-align: top;">
                        <select id="From" style="width: 60px;"> 
                            <option></option> 
                        </select></td>
                    <td style="vertical-align: top;">
                        <select id="To" style="width: 60px;"> 
                            <option></option> 
                        </select></td>
                    <td colspan="5">
                        <textarea id="Comment" class="fValid" style="width: 350px; font-size: smaller; height: 40px;" cols="1" rows="3">
                        </textarea>
                    </td>
                    <td style="vertical-align: top;"><input id="Instr" style="width: 25px;" type="text" /></td>
                    <td style="vertical-align: top;"><input id="Ldg" class="fValid" style="width: 28px;" type="text" /></td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align: center;"><label>Aircraft type</label></td>
                    <td colspan="2" style="text-align: center;"><label>Time</label></td>
                    <td colspan="2" style="text-align: center;"><label>Instrument time</label></td>
                    <td>&nbsp;</td>
                    <td colspan="2" style="text-align: center;"><label>Total time</label></td>
                    <td style="text-align: center;"><label>Condition</label></td>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td style="text-align: center; vertical-align: top;"><label>Cmplx</label></td>
                    <td style="text-align: center; vertical-align: top;"><label>SEL</label></td>
                    <td style="text-align: center; vertical-align: top;"><label>MEL</label></td>
                    <td style="text-align: center; vertical-align: top;"><label>Day</label></td>
                    <td style="text-align: center; vertical-align: top;"><label>Night</label></td>
                    <td style="text-align: center;"><label>Actual</label></td>
                    <td style="text-align: center;"><label>Simulated</label></td>
                    <td style="text-align: center;"><label>Ground</label></td>
                    <td style="text-align: center;">PIC</td>
                    <td style="text-align: center;">SIC&nbsp;</td>
                    <td style="text-align: center; vertical-align: top;">&nbsp;</td>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td style="text-align: center; vertical-align: top;"><input id="cmplx" name="cmplx" type="checkbox" /></td>
                    <td style="text-align: center; vertical-align: top;"><input id="tsel" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center; vertical-align: top;"><input id="tmel" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center; vertical-align: top;"><input id="tday" style="width: 45px;" type="text" /></td>
                    <td style="vertical-align: top;"><input id="tnight" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center;"><input id="isim" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center;"><input id="iactual" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center;"><input id="ground" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center;"><input id="tpic" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center;"><input id="tsic" style="width: 45px;" type="text" /></td>
                    <td style="text-align: center; vertical-align: top;">
                        <input id="tsolo" name="solodual" checked="checked" type="radio" />Solo
                        <input id="tdual" name="solodual" type="radio" />Dual</td>
                    <td colspan="3" style="text-align: center; color: blue;"><span id="tcalc"></span></td>
                </tr>
                <tr>
                    <td colspan="7">&nbsp;</td>
                    <td colspan="7" style="text-align: right;">
                        <button id="btnClear" style="width: 80px;">Clear</button>
                    </td>
                </tr>
                <tr>
                <td colspan="14">&nbsp;</td>
                </tr>
        </tbody>
        </table>        
    </div>
    <div id="Modelsdialog" title="Add model">
        
    </div>
    <div id="NNumbersdialog" title="Add N Number">
        <table style="width: 100%; border: thin solid #000000; ">
            <tr>
                <td>&nbsp;&nbsp;&nbsp;<label>Category</label></td>
                <td>&nbsp;&nbsp;&nbsp;<select id="ddCategory"></select></td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;<label>Model</label></td>
                <td>&nbsp;&nbsp;&nbsp;<select id="ddModel"></select></td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;<label>N Number</label></td>
                <td>&nbsp;&nbsp;&nbsp;<input type="text" id="nnumber" /></td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;<label>Comment</label></td>
                <td>&nbsp;&nbsp;&nbsp;
                    <textarea id="nComment" style="width: 350px; font-size: smaller; height: 40px;" cols="1" rows="3"></textarea>
                </td>
            </tr>
        </table>
    </div>

</body>
</html>
